<template>
  <div>
    <el-row :gutter="16">
      <el-col :span="4">
        <div class="label-wrap category">
          <label for="">类别：</label>
          <div class="wrap-content">
            <el-select v-model="categoryValue" placeholder="请选择">
              <el-option
                v-for="item in category"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="label-wrap date">
          <label for="">日期：</label>
          <div class="wrap-content">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
            >
            </el-date-picker>
          </div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="label-wrap search-key">
          <label for="">关键字：</label>
          <div class="wrap-content">
            <el-select v-model="search_key" placeholder="请选择">
              <el-option
                v-for="item in keyword"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="label-wrap search-content">
          <label for=""></label>
          <div class="wrap-content">
            <el-input
              v-model="searchContent"
              placeholder="请输入内容"
              style="width: 100%"
            ></el-input>
          </div>
        </div>
      </el-col>
      <el-col :span="6" class="btnbox">
        <el-button type="danger">搜索</el-button>
        <el-button type="danger" @click="dialogshow = true"
          >新增</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="tableData" border class="datatable">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="530" align="center">
      </el-table-column>
      <el-table-column prop="category" label="类别" width="130" align="center">
      </el-table-column>
      <el-table-column prop="date" label="日期" width="237" align="center">
      </el-table-column>
      <el-table-column prop="user" label="管理员" width="115" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="success" @click="dialogshow = true"
            >编辑</el-button
          >
          <el-button type="danger" @click="deleteItem"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 底部分页 -->
    <el-row type="flex" class="pagination">
      <el-button @click="deleteAll">批量删除</el-button>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </el-row>

    <!-- 新增弹窗 -->
    <new-info v-model:dialogVisible="dialogshow" />
  </div>
</template>

<script>
import { reactive, ref, watch } from 'vue';
import NewInfo from "./dialog/NewInfo.vue";
import { global } from "@api/global.js"

export default {
  components: { NewInfo },
  name: "Info",
  setup() {
    const { confirm } = global()

    // reactive
    const category = reactive([
      {
        value: "选项1",
        label: "国内信息",
      },
      {
        value: "选项2",
        label: "国际信息",
      },
      {
        value: "选项3",
        label: "行业信息",
      },
    ]);

    const keyword = reactive([
      {
        value: "ID",
        label: "ID",
      },
      {
        value: "title",
        label: "标题",
      },
    ]);

    const tableData = reactive([
      {
        title: "新闻1",
        category: "王小虎",
        date: "2016-05-02",
        user: "管理员",
      },
      {
        title: "新闻1",
        category: "王小虎",
        date: "2016-05-02",
        user: "管理员",
      },
      {
        title: "新闻1",
        category: "王小虎",
        date: "2016-05-02",
        user: "管理员",
      },
      {
        title: "新闻1",
        category: "王小虎",
        date: "2016-05-02",
        user: "管理员",
      },
    ]);

    // ref
    const categoryValue = ref("");
    const date = ref("");
    const search_key = ref("");
    const searchContent = ref("");
    const dialogshow = ref(false);

    /* methods */
    const handleSizeChange = (val) => {
      console.log(val);
    };

    const handleCurrentChange = (val) => {
      console.log(val);
    };

    const deleteItem = () => {
      confirm({
        content: "删除此条数据？",
        tip: "警告",
        fn: confirmDelete,
      })
    };

    const deleteAll = () => {
      confirm({
        content: "批量删除选中的数据?",
        fn: confirmDelete,
      })
    }

    const confirmDelete = (value)=> {
      console.log(value);
    }

    return {
      // reactive
      category,
      keyword,
      tableData,
      // ref
      dialogshow,
      categoryValue,
      date,
      search_key,
      searchContent,
      // menthod
      handleSizeChange,
      handleCurrentChange,
      deleteItem,
      deleteAll
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@styles/config.scss";

.label-wrap {
  &.category {
    @include labelDom(right, 60, 28);
  }
  &.date {
    @include labelDom(right, 60, 28);
  }
  &.search-key {
    @include labelDom(right, 60, 28);
  }
  &.search-content {
    @include labelDom(right, 20, 28);
  }
}

.datatable {
  width: 100%;
  margin-top: 20px;
}

.btnbox {
  display: flex;
  justify-content: space-between;
}

.pagination {
  margin-top: 20px;
  justify-content: space-between;
}
</style>